<script setup>
import { ref, reactive } from 'vue'
import datav1 from '@/assets/images/datav1.png'
import datav2 from '@/assets/images/datav2.png'
import datav3 from '@/assets/images/datav3.png'
import datav4 from '@/assets/images/datav4.png'
import datav5 from '@/assets/images/datav5.png'
import datav6 from '@/assets/images/datav6.png'
import datav7 from '@/assets/images/datav7.png'

const config1 = reactive({
    data: [
        {
            name: '杭州',
            value: 98,
        },
        {
            name: '金华',
            value: 150,
        },
        {
            name: '宁波',
            value: 62,
        },
        {
            name: '太原',
            value: 54,
        },
        {
            name: '西峡',
            value: 98,
        },
        {
            name: '南阳',
            value: 167,
        },
        {
            name: '周口',
            value: 67,
        },
    ],
    img: [
        datav1,
        datav2,
        datav3,
        datav4,
        datav5,
        datav6,
        datav7,
    ],
})
const config2 = reactive({
  centerPoint: [0.48, 0.35],
  points: [
    {
      position: [0.52, 0.235],
      text: '新乡',
    },
    {
      position: [0.43, 0.29],
      text: '焦作',
    },
    {
      position: [0.59, 0.35],
      text: '开封',
    },
    {
      position: [0.53, 0.47],
      text: '许昌',
    },
    {
      position: [0.45, 0.54],
      text: '平顶山',
    },
    {
      position: [0.36, 0.38],
      text: '洛阳',
    },
    {
      position: [0.62, 0.55],
      text: '周口',
    },
    {
      position: [0.56, 0.56],
      text: '漯河',
    },
    {
      position: [0.37, 0.66],
      text: '南阳',
    },
    {
      position: [0.55, 0.81],
      text: '信阳',
    },
    {
      position: [0.55, 0.67],
      text: '驻马店',
    },
    {
      position: [0.37, 0.29],
      text: '济源',
    },
    {
      position: [0.20, 0.36],
      text: '三门峡',
    },
    {
      position: [0.76, 0.41],
      text: '商丘',
    },
    {
      position: [0.59, 0.18],
      text: '鹤壁',
    },
    {
      position: [0.68, 0.17],
      text: '濮阳',
    },
    {
      position: [0.59, 0.10],
      text: '安阳',
    },
  ],
})

const option = reactive({
  title: {
    text: '剩余油量表',
    style: {
      fill: '#fff'
    }
  },
  series: [
    {
      type: 'gauge',
      data: [ { name: 'itemA', value: 55 } ],
      center: ['50%', '55%'],
      axisLabel: {
        formatter: '{value}%',
        style: {
          fill: '#fff'
        }
      },
      axisTick: {
        style: {
          stroke: '#fff'
        }
      },
      animationCurve: 'easeInOutBack'
    }
  ]
})

</script>
<template>

    <div style="flex:0 1 30%">
        <dv-border-box-10 style="width: 100%; height: 300px;">
            <dv-conical-column-chart :config="config1" style="width:100%;height:200px;" />
        </dv-border-box-10>
    </div>
    <div style="flex:0 1 40%">
        <dv-border-box-10 style="width: 100%; height: 300px;">
            <dv-flyline-chart :config="config2" :dev="true" style="width:100%;height:100%;" />
        </dv-border-box-10>
    </div>
    <div style="flex:0 1 30%">
    <dv-border-box-10 style="width: 100%; height: 300px;">
      <dv-charts :option="option" style="width:100%;height:100%;"/>
    </dv-border-box-10>
    </div>
            
</template>
<style lang="less" scoped>
</style>
